<!--
 * @Author: your name
 * @Date: 2021-09-16 17:14:29
 * @LastEditTime: 2021-09-22 09:09:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hello-uni\components\iconcomponents\components\Context.vue
-->
<template>
	<view class="Context">
		<!-- 导航栏 -->
		<view class="nav">
			<view class="guanbi">
				<uni-icons @tap="NavigateBack" type="back" size="24"></uni-icons>
				<view class="guan">关闭</view>
			</view>
			<view>客户资料列表</view>
			<view class="san"></view>
		</view>
		<!-- 通过nav跳转api来传送数据 -->
		<view class="list">
			<view class="list1">
				<view class="title">{{ item.title }}</view>
				<view class="two">
					<view class="time">{{ item.time }}</view>
					<view class="name">&nbsp;| {{ item.name }}</view>
				</view>
				<view class="address">单位地址:{{ item.address }}</view>
				<view class="hot icon-specifications">热度:{{ item.hot }}</view>
			</view>
			<view class="list2">
				<view class="one">
					<svg class="icon" aria-hidden="true"><use :xlink:href="item.hoticon"></use></svg>
					<view class="hotday">{{ item.hotday }}</view>
				</view>
				<view class="one">
					<svg class="icon" aria-hidden="true"><use :xlink:href="item.recoveryicon"></use></svg>
					<view class="recovery">{{ item.recovery }}</view>
				</view>
			</view>
		</view>
		<!-- 导航栏下的联系人块 -->
		<view class="linkman">
			<view class="left">
				<view class="one">
					<image src="/static/liujianping.png" mode=""></image>
					<view class="name">
						刘建平
					</view>
				</view>
				<view class="one">
					<view class="name">
						2人
					</view>
					<uni-icons type="arrowright" size="14"></uni-icons>
				</view>
				
			</view>
			<view class="left">
				<view class="one">
					<image src="/static/gongyingshang.png" mode=""></image>
					<view class="name">
						普通供应商
					</view>
				</view>
				<view class="one">
					<uni-icons type="arrowright" size="14"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 标签页导航 -->
		<view class="test" >
				<view class="tab" >
					<view v-for="(nav,a) in navs" :key="a" href="#" @click="showDiv=a" :class="{'select':showDiv===a}">{{nav.title}}({{nav.num}})</view>
				</view>
				<!-- 导航内容 -->
				<view class="tabConten" v-show="showDiv===0" v-for="(item,i) in genjin" :key="i">
					
					<!-- 导航内容1 -->
					<view class="header">
						<image src="@/static/liujianping.png" mode=""></image>
						<view class="one">
							<view class="title">跟进了{{item.name}}
							</view>
							<view class="text">{{item.time}}	
							</view>
						</view>
					</view>
					<view class="data">开始时间:{{item.start}}</view>
					<view class="data">执行人:{{item.implement}}</view>
					<view class="data">签到地址:{{item.address}}</view>
				</view>
				<!-- 导航内容2 -->
				<view class="tabConten" v-show="showDiv===1" v-for="(item,i) in genjin" :key="i">
					<!-- 导航内容1 -->
					<view class="header">
						<image src="@/static/liujianping.png" mode=""></image>
						<view class="one">
							<view class="title">跟进了二号{{item.name}}
							</view>
							<view class="text">{{item.time}}	
							</view>
						</view>
					</view>
					<view class="data">开始时间:{{item.start}}</view>
					<view class="data">执行人:{{item.implement}}</view>
					<view class="data">签到地址:{{item.address}}</view>
				</view>
				<!-- 导航内容3 -->
				<view class="tabConten" v-show="showDiv===2" v-for="(item,i) in genjin" :key="i">
					<!-- 导航内容1 -->
					<view class="header">
						<image src="@/static/liujianping.png" mode=""></image>
						<view class="one">
							<view class="title">跟进了三号{{item.name}}
							</view>
							<view class="text">{{item.time}}	
							</view>
						</view>
					</view>
					<view class="data">开始时间:{{item.start}}</view>
					<view class="data">执行人:{{item.implement}}</view>
					<view class="data">签到地址:{{item.address}}</view>
				</view>
				<!-- 导航内容4 -->
				<view class="tabConten" v-show="showDiv===3" v-for="(item,i) in genjin" :key="i">
					<!-- 导航内容1 -->
					<view class="header">
						<image src="@/static/liujianping.png" mode=""></image>
						<view class="one">
							<view class="title">跟进了四号{{item.name}}
							</view>
							<view class="text">{{item.time}}	
							</view>
						</view>
					</view>
					<view class="data">开始时间:{{item.start}}</view>
					<view class="data">执行人:{{item.implement}}</view>
					<view class="data">签到地址:{{item.address}}</view>
				</view>
				
			</view>

	</view>
</template>

<script>
import { ref,reactive } from 'vue';
import topbar from '@/components/top-tabbar/top-tabbar.vue'
export default {
	components:{topbar},
	onLoad(options) {
		console.log('客户数据str', options.obj);
		this.item = JSON.parse(decodeURIComponent(options.obj) || "0");
		console.log('客户数据对象', this.item);
	},
	
	setup() {
		// 点击返回
		const NavigateBack = () => {
			uni.navigateBack();
		};
		// 标签导航栏
		const showDiv = ref(1)
		const genjin = reactive([
			{name:"罗辑",
			time:"2021-9-18",
			start:"2021-9-18",
			implement:"章北海",
			address:"华山"
			},
			{name:"罗辑",
			time:"2021-9-18",
			start:"2021-9-18",
			implement:"章北海",
			address:"华山"
			},
		])
		const navs = reactive([
			{title:"跟进记录",
			num:8},
			{title:"详情",
			num:'0'},
			{title:"销售机会",
			num:12},
			{title:"报价机会",
			num:3},
		])

		return {
			NavigateBack,showDiv,genjin,navs
		};
		
	},
	
};
</script>

<style scoped lang="scss">
// 图表样式
.icon {
	width: 24rpx;
	height: 24rpx;
	fill: blue;
	overflow: hidden;
}
// 导航栏
	.nav{
		background-color: $uni-text-color-inverse;
		display: flex;
		justify-content: space-between;
		padding: 16rpx 16rpx;
		.guanbi{
			display: flex;
		}
		.san{
			width: 150rpx;
		}
	}
// 列表样式
.list {
	height: 130 * 2rpx;
	display: flex;
	background-color: $uni-text-color-inverse;
	justify-content: space-between;
	padding: 0 16 * 2rpx;
	border-bottom: 1rpx solid #F2F2F7;
	.list1 {
		height: 130 * 2rpx;
		.title {
			font-size: 16 * 2rpx;
			line-height: 16 * 2rpx;
			color: #3c3c3c;
			margin-top: 16 * 2rpx;
		}
		.two {
			font-size: 13px;
			line-height: 14px;
			color: #777777;
			display: flex;
			margin-top: 16 * 2rpx;
		}
		.address {
			font-size: 13px;
			line-height: 14px;
			color: #777777;
			margin-top: 16 * 2rpx;
		}
		.hot {
			font-size: 13 * 2rpx;
			line-height: 14 * 2rpx;
			color: #777777;
			margin: 16 * 2rpx 0;
		}
	}
	.list2 {
		.one {
			display: flex;
			padding-top: 16 * 2rpx;
			.hotday {
				font-size: 12 * 2rpx;
				line-height: 14 * 2rpx;
				color: #ff4d4f;
			}
			.recovery {
				font-size: 12px;
				line-height: 14px;
				color: #27c489;
			}
		}
	}
}
// 联系人块
.linkman{
	background-color: $uni-text-color-inverse;
	display: flex;
	height: 56*2rpx;
	.left{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 187*2rpx;
		padding:0 16*2rpx;
		border-right: 1rpx solid #F2F2F7;
		border-bottom: 6*2rpx solid #F2F2F7;
		.one{
			display: flex;
			align-items: center;
			image{
				width: 24*2rpx;
				height: 24*2rpx;
				padding-right:4*2rpx
			}
			.name{
				line-height: 24*2rpx;
			}
		}
	}
}
// 标签页导航
.test{
	background-color: $uni-text-color-inverse;
	
	.tab{
		display:flex;
		align-items: center;
		view{
			width: 80*2rpx;
			height: 54*2rpx;
			text-align: center;
			font-size: 12px;
			line-height: 54*2rpx;
		}
		.select{
			color: #577FFF;
			border-bottom: 3rpx solid #577FFF;
		}
	}
	// 标签页导航内容
	.tabConten{
		padding:16*2rpx 0 16*2rpx 16*2rpx;
		border-bottom: 1px solid #F2F2F7;
		.header{
			display: flex;
			// 头像
			image{
				width: 32*2rpx;
				height: 32*2rpx;
				margin-right: 16rpx;
			}
			// 跟进了谁谁谁
			.one{
				.title{
					font-size: 14px;
					line-height: 20px;
					color: #3C3C3C;
				}
				.text{
					font-size: 12px;
					line-height: 14px;
					color: #999999;
				}
			}
		}
		// 开始时间等三行内容
		.data{
			font-size: 13px;
			line-height: 14*2rpx;
			color: #777777;
			margin-top: 8*2rpx;
		}
	}
}

</style>
